<template>
  <div>
    <div class="banner">
      <div class="borders" @click="showSwiper">
        <div class="banner-img">
          <img :src="bannerList[0].homePage">
        </div>
        <div class="banner-scenicSpot">
          <div class="banner-title">{{bannerList[0].title}}</div>
        </div>
        <div class="banner-PictureInfo">
          <img src="@/../static/img/bannerImg.png">
          <em>{{bannerList.length}}</em>
        </div>
      </div>

      <div  class="img-swiper" v-show="imgSwiper" >
        <swiper class="posin" :options="swiperOptions" v-if="showSwiper">
          <swiper-slide v-for="item of bannerList" :key="item.id">
            <img class="swiper-img"  :src='item.imgUrl' />
          </swiper-slide>
          <div  class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="bgcolorTop" v-show="imgSwiper" @click="hideSwiper"></div>
      <div class="bgcolorBottom" v-show="imgSwiper" @click="hideSwiper"></div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'DetailsBanner',
  props: {
    bannerList: Array
  },
  data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction'
      },
      imgSwiper: false
    }
  },
  methods: {
    showSwiper () {
      this.imgSwiper = true
    },
    hideSwiper () {
      this.imgSwiper = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  .banner
    height 4.11rem
    background #f5f5f5
    position relative
    .banner-img
      overflow hidden
      height 0
      width 100%
      padding-bottom 55%
      img
        width 100%
        vertical-align top
    .banner-scenicSpot
      position absolute
      bottom .36rem
      font-size .36rem
      left .2rem
      min-height .4rem
      .banner-title
        line-height .4rem
        color white
        text-shadow: 1px 0px 5px rgba(255, 255, 255, .9)
    .banner-PictureInfo
      position absolute
      width 1.2rem
      height .4rem
      background rgba(0,0,0,.5)
      border-radius .5rem;
      color #fff
      line-height .4rem
      text-align center
      padding .03rem 0
      bottom .86rem
      text-shadow: 1px 0px 5px rgba(255, 255, 255, .9)
      left .2rem
      img
        width 30%
        height 80%
        position relative
      em
        font-size .001rem
        position relative
    .img-swiper
      background #000
      display flex
      position fixed
      top 0
      bottom 0
      width 100%
      justify-content center
      align-items center
      z-index 10
      .posin
        position static
      img
        width 100%
      .borders:after
        content ""
        display block
        position absolute
        bottom 0
        left 0
        width 100%
        min-height .6rem
        background-color transparent
        background-image linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.8))
        z-index 1
      .swiper-pagination
        width 100%
        bottom 50px
        color white
        text-shadow: 0px 0px 6px rgba(255, 255, 255, .9)
  .bgcolorTop
    position absolute
    top 0
    width 100%
    height 4.32rem
    background #000
    z-index 11
  .bgcolorBottom
    position absolute
    width 100%
    bottom -7.8rem
    height 3.1rem
    background #000
    z-index 11
</style>
